<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程</title>
    <link rel="stylesheet" href="css/home.css">
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="18"><div class="grid-content bg-purple">
                    --- 删 除 课 程
                </div></el-col>
                <el-col :span="6"><div class="grid-content bg-purple-light">
                    <el-button type="primary" @click="classPage">查看课程</el-button>
                    <el-button type="success" @click="quit"> 退 出 登 录</el-button >
                </div></el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="100px">
            </el-aside>
            <el-main >
                <template>
                    <el-table
                            ref="multipleTable"
                            :data="chooseCourses"
                            tooltip-effect="dark"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                prop="course_id"
                                label="课程编号"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="course_name"
                                label="课程名称"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="teacher"
                                label="授课老师"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="point"
                                label="学分"
                                width="80">
                        </el-table-column>
                        <el-table-column
                                prop="class_time"
                                label="上课时间"
                                width="310">
                        </el-table-column>
                        <el-table-column
                                prop="location"
                                label="上课地点"
                                width="150">
                        </el-table-column>
                        <el-table-column
                                prop="limited"
                                label="限制人数"
                                width="120">
                        </el-table-column>
                        <el-table-column
                                prop="select_number"
                                label="已选人数"
                                width="120">
                        </el-table-column>
                    </el-table>
                    <div style="margin-top: 20px">
                        <el-button @click="toggleSelection()">取 消 选 择</el-button>
                        <el-button type="success" @click="delete_class()">删 除</el-button >
                    </div>
                </template>
            </el-main>
        </el-container>
    </el-container>

</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>

    // 用户--------------------
    user={
        "userName" : "",
        "passWord" : "",
        "realName" : "",
        "role" : "",
    }

    // 获取当前用户
    var url=window.location.search; //获取url中"?"符后的字串
    url = decodeURI(url);
    //接收一个值
    function oneValues(){
        var value;
        var url=window.location.search; //获取url中"?"符后的字串
        if(url.indexOf("?")!=-1){
            value = url.substr(url.indexOf("=")+1);
        }
        return decodeURI(value);
    }
    var result = oneValues();
    user.userName=result;
    new Vue({
        el:"#app",
        mounted(){
            //当页面加载完成后，发送异步请求，获取数据

            var _this = this;
            // var timer = setInterval(function(){
                axios({
                    method: "post",
                    // url: "http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/chooseCourseServlet",
                    url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/chooseCourseServlet",
                    data: user
                }).then(function (resp) {
                    _this.chooseCourses = resp.data;
                })
            // }, 10);
            // timer
        },
        methods: {

            classPage(){
                // 跳转添加课程网页
                window.location.href="teacher_home.html?valus=" + user.userName;
            },
            quit(){
                // 退出到登录页面
                user.userName = '';
                window.location.href="login.html";
            },

            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            delete_class(){
                // 将待删除的数据传到服务器进行删除
                axios({
                    method:"post",
                    // url:"http://localhost:8080/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/delete_course_Servlet",
                    url: "http://1f4c5f22.r6.cpolar.top/%E5%AD%A6%E7%94%9F%E9%80%89%E8%AF%BE%E7%B3%BB%E7%BB%9F/delete_course_Servlet",
                    data:this.multipleSelection
                }).then(function (resp) {
                    if(resp.data == "yes"){
                        // 刷新页面
                        window.location.href="deleteClass.html?valus=" + user.userName;
                    }else if(resp.data == "no"){
                        alert("删除失败")
                    }
                })
            },
        },
        data() {
            return {
                chooseCourses:[],
                multipleSelection: [],
            }
        }
    })
</script>
</body>
</html>